<template>
	<!-- 搜索结果页 -->
	<view>
		<view style="background:  #fff" class="my-head">
			<view class="searchbox" v-if="showSearch">
				<view class="search-box  ">
					<u-search :clearabled="true" :showAction='false' :placeholder="'搜索课程、机构'" v-model="keyWord"
						@change="searchChange" @search="search"></u-search>
				</view>
				<view class="head-right  " @click="quxiao()"> 取消
				</view>
			</view>

			<baseHead :title="title" bg="#ffffff" color="#000000" v-if="!showSearch"></baseHead>

			<view class="tab_box" :style="{'width':windowWidth +'px'}">
				<u-tabs :list="list1" @click="clickTabs" :current="typeNumber"
					:itemStyle="{ height: '44px',width:'50px' }" :activeStyle="{color:'#3476FE'}"
					:lineColor="'#3476FE'">
				</u-tabs>
			</view>
		</view>

		<view class="occupy"></view>
		<scroll-view scroll-y @scrolltolower="scrolltolower" :style="{'height':windowHeight-50-statusBarH-44+'px'}">
			<view class="content">
				<view v-for="(item,index) in onLineList" :key="index" class="item_box">
					<view @click="clickDetails(item)">
						<courseCourse :objectData="item" :QuantityName="'已购买'">

						</courseCourse>
					</view>

					<view v-if="item.Type>=0">
						<view class="shuqian" v-if="item.Type==0">
							线上
						</view>
						<view class="shuqian1" v-else-if="item.Type==1">
							线下
						</view>
						<view class="shuqian2" v-else-if="item.Type==2">
							文档
						</view>
					</view>

				</view>
			</view>
			<u-loadmore :status="status" style="padding-bottom: 40rpx;" />
		</scroll-view>
	</view>
</template>

<script>
	import baseHead from '@/pages/component/baseHead.vue'
	import courseCourse from "@/pages/views/packageD/template/courseCourse.vue"
	export default {
		components: {
			courseCourse,
			baseHead
		},
		data() {
			return {
				title: '',
				list1: [{
						id: 1,
						name: "最新",
					}, {
						id: 0,
						name: "默认",
					},
					{
						id: 1,
						name: "最新",
					},
					{
						id: 2,
						name: "最热",
					},

				],
				typeNumber: 0, //默认选中
				keyWord: '',
				statusBarH: '', //状态栏高度
				windowHeight: '', //窗口高度
				windowWidth: '', //窗口宽度
				obj: {
					PageIndex: 1, //页码
					PageSize: 10, //每页大小
					CategoryId: null, //-1全部	线上0 线下1 文档2
					Type: null,
					Title: ''
				},
				onLineList: [],
				status: 'loadmore',
				showSearch: true, //是否显示搜索框

			}
		},
		onLoad(option) {
			this.tabList()
			if (option) {
				console.log(option);
				if (option.keyWord) {
					this.obj.Title = option.keyWord
				}
				if (option.SwiperDedails) {
					this.title = JSON.parse(option.SwiperDedails).Title
					this.showSearch = false
				}
			}
			this.peixunban()
		},
		created() {
			const app = getApp()
			this.statusBarH = app.globalData.statusBarH //状态栏高度
			this.windowHeight = app.globalData.phoneInformation.windowHeight //屏幕高度
			this.windowWidth = app.globalData.phoneInformation.windowWidth
		},
		methods: {
			// 取消
			quxiao() {
				// 返回上一页
				uni.navigateBack({
					delta: 2
				})
			},
			// 标签卡数据
			tabList() {
				let sa = {
					name: "全部",
					id: -1,
				};
				this.$http.dic.coreSelector(448042871652485).then((res) => {
					if (res.Success) {
						let arr = []
						res.Result.forEach(item => {
							let obj = {}
							obj.id = item.EnCode
							obj.name = item.FullName
							arr.push(obj)
						});
						arr.unshift(sa);
						this.list1 = arr
					}
				});
			},
			// 点击tab
			clickTabs(item) {
				if (this.obj.type == item.id) return
				if (item.id == -1) {
					this.obj.Type = null
				} else {
					this.obj.Type = item.id
				}
				this.status = 'loadmore'
				this.obj.PageIndex = 1
				this.onLineList = []
				this.peixunban()
			},
			// 页面滚动到底部事件
			scrolltolower() {
				// 加载前值为loadmore，加载中为loading，没有数据为nomore
				console.log(this.status);
				if (this.status != "nomore") {
					this.status = "loading";
					this.peixunban();
				}
			},
			peixunban() {

				// 线上
				this.$http.digitalize.indexList(this.obj).then(res => {
					if (res.Success) {
						if (res.Result.Items.length == 0) {
							// 没有数据----
							this.status = "nomore";
							return;
						}
						this.onLineList = this.onLineList.concat(res.Result.Items);
						if (res.Result.Items.length >= this.obj.PageSize) {
							this.obj.PageIndex++;
							// 表示还有数据
						} else {
							//没有更多数据了
							this.status = "nomore";
						}
					}

				});

			},
			clickDetails(item) {
				if (item.Type >= 0) {
					if (item.Type != 1) {
						uni.navigateTo({
							url: `/pages/views/packageD/type-jobhunting/shuzihua/details?id=${item.Id}&index=${item.Type}`,
						});
					} else {
						uni.navigateTo({
							url: `/pages/views/packageD/type-jobhunting/shuzihua/OfflineCourseDetails?id=${item.Id}`,
						});
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-head {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;

		.searchbox {

			width: 100%;
			height: calc(88rpx + var(--status-bar-height));

			z-index: 999;
			padding: var(--status-bar-height) 40rpx 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			background-color: #ffffff;

			.search-box {
				border-radius: 32px;
				height: 64rpx;
				margin-right: 20rpx;
				box-sizing: border-box;
				flex: 1;


				input {
					width: auto !important;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333;
					margin-left: 20rpx;
					flex: 1;
				}

				.input-pla {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}


			}

			.head-right {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				min-width: 70rpx;
				text-align: end;
			}


		}




		.tab_box {
			background-color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 88rpx;
			z-index: 999;
		}
	}

	.occupy {
		height: calc(88rpx + 88rpx + var(--status-bar-height));
	}

	.content {
		padding: 30rpx 30rpx 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;


		.item_box {
			width: 48%;
			margin-bottom: 20rpx;
			position: relative;
			background-color: #fff;
			border-radius: 10rpx;

			.shuqian {
				position: absolute;
				left: 9rpx;
				top: 12rpx;
				width: 99rpx;
				height: 32rpx;
				background: #3476FE;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				opacity: 1;

				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.shuqian1 {
				position: absolute;
				left: 9rpx;
				top: 12rpx;
				width: 99rpx;
				height: 32rpx;
				background: #F35E79;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				opacity: 1;

				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.shuqian2 {
				position: absolute;
				left: 9rpx;
				top: 12rpx;
				width: 99rpx;
				height: 32rpx;
				background: #FEA034;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				opacity: 1;

				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>